fix: polish pass — label noise, drag handle, toast spacing (#522)#563
fix: polish pass — label noise, drag handle, toast spacing (#522)#563Chris0Jeky merged 3 commits intomainfrom
Conversation
- Hide "Drag card" text on the drag handle by default; text fades in only when the handle is hovered, letting the dotted-grid icon carry affordance in compact mode - Add a colour swatch (3×3 rounded dot) next to each label name in the CardModal picker so label colour is visible before the row is selected - Add native tooltip to "Precision Mode Active" sidebar subtitle explaining the mode and pointing users to Preferences
Success toast for card creation was showing a leading space inside the quoted name (e.g. Card " First test card" created successfully) because the raw API-returned title was not trimmed before interpolation.
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
Self-review (adversarial pass)All issue items addressed?
Light/dark modeThe drag-label change uses only ResponsivenessThe drag-label CSS uses scoped opacity; the drag handle button is already Toast stackingThe toast container ( Tailwind class consistency
Risk of unintended layout impact
One finding to address post-mergeThe drag-label text at No blockers found. Diff is correct and minimal. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces several UI and UX improvements, including a hover-triggered drag label on cards, visible color swatches for labels in the card modal, and an informative tooltip for Precision Mode in the sidebar. Feedback focuses on ensuring data consistency by trimming card titles before they are sent to the API, rather than just in the UI toast, and simplifying the CSS implementation for the hidden drag label.
| state.currentBoardCards.value.push(newCard) | ||
| helpers.updateColumnCardCount(newCard.columnId, 1) | ||
| helpers.toast.success(`Card "${newCard.title}" created successfully`) | ||
| helpers.toast.success(`Card "${newCard.title.trim()}" created successfully`) |
There was a problem hiding this comment.
This change correctly trims the whitespace for the toast message, but the underlying card data in the state and on the server will still contain the whitespace. This can lead to inconsistent display of the card title.
A more robust fix would be to trim the title before sending it to the API. This ensures data consistency across the application. You could modify the createCard function like this:
async function createCard(boardId: string, card: CreateCardDto) {
// ...
const cardData = { ...card, title: card.title.trim() };
const newCard = await cardsApi.createCard(boardId, cardData);
state.currentBoardCards.value.push(newCard);
helpers.updateColumnCardCount(newCard.columnId, 1);
// The title from `newCard` should now be trimmed, so no .trim() is needed here.
helpers.toast.success(`Card "${newCard.title}" created successfully`);
// ...
}This would fix the issue at its source.
| transition: opacity var(--td-transition-fast); | ||
| } | ||
|
|
||
| /* Hide "Drag card" text by default; reveal only on drag-handle hover */ | ||
| .td-board-card__drag-label--hidden { | ||
| opacity: 0; | ||
| } | ||
|
|
||
| .td-card-drag-handle:hover .td-board-card__drag-label--hidden { | ||
| opacity: 1; | ||
| } |
There was a problem hiding this comment.
This implementation can be simplified by setting opacity: 0 on the base .td-board-card__drag-label class and removing the td-board-card__drag-label--hidden class modifier. This makes the template cleaner and the CSS more direct.
To apply this, you would:
- Modify this block with the suggestion below.
- Remove the
td-board-card__drag-label--hiddenclass from the<span>in the template (line 86).
transition: opacity var(--td-transition-fast);
opacity: 0;
}
.td-card-drag-handle:hover .td-board-card__drag-label {
opacity: 1;
}
- CardItem.vue: collapse hidden drag-label width to zero so the invisible text does not consume horizontal flex space and widen the button layout; restore width:auto on hover so the transition still works - CardModal.vue: add bg-outline-variant fallback class on colour swatch so the dot remains visible when colorHex is empty/falsy
Adversarial Review — #563Reviewed all four change areas. Two genuine issues found and fixed directly in the branch (commit Finding 1 — CardItem.vue: hidden label still occupies layout space (FIXED)Problem: Fix: Added Finding 2 — CardModal.vue: invisible swatch when colorHex is empty (FIXED)Problem: The swatch Fix: Changed to Non-issues (no fix needed)
All 1107 unit tests pass, |
1 participant
Summary
Card " First test card" created successfully→Card "First test card" created successfully)titletooltip to the "Precision Mode Active" sidebar subtitle explaining the mode and pointing users to PreferencesCloses #522
Changes
CardItem.vue:.td-board-card__drag-label--hiddenclass; opacity 0 by default, 1 on.td-card-drag-handle:hoverCardModal.vue:<span>colour swatch inserted before the label name in the picker listcardStore.ts:newCard.title.trim()in the success toast messageShellSidebar.vue: nativetitleattribute on.td-sidebar__subtitleTest plan
npm run typecheckpasses (clean)